import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'car_page.dart';
import 'category_page.dart';
import 'home_page.dart';
import 'member_page.dart';

class IndexPage extends StatefulWidget {
  @override
  _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {
  //设置默认的颜色
  final _defaultColor = Colors.grey;

  //设置 选中的颜色
  final _activeColor = Colors.blue;

  //设置索引
  int _currentIndex = 0;

  //获取页面
  final List<Widget> tabBodies = [HomePage(), CateGoryPage(), CarPage(), MemberPage()];


  /*
   * IndexedStack  IndexedStack继承自Stack，它的作用是显示第index个child，其它child在页面上是不可见的，但所有child的状态都被保持，
   */
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //设置页面
      body: IndexedStack(
        index: _currentIndex,
        children: tabBodies,
      ),
      backgroundColor: Color.fromRGBO(244, 245, 245, 1.0),
      bottomNavigationBar: BottomNavigationBar(
          onTap: (index) {
            setState(() {
              _currentIndex = index;
            });
          },
          currentIndex: _currentIndex,
          type: BottomNavigationBarType.fixed,
          items: [
            _bottomItem("首页", CupertinoIcons.home, 0),
            _bottomItem("分类", CupertinoIcons.search, 1),
            _bottomItem("购物车", CupertinoIcons.shopping_cart, 2),
            _bottomItem("会员中心", CupertinoIcons.profile_circled, 3),
          ]),
    );
  }

  //navigator 封装bottomBar组件
  _bottomItem(String title, IconData icon, int index) {
    return BottomNavigationBarItem(
        icon: Icon(
          icon,
          color: _defaultColor,
        ),
        activeIcon: Icon(
          icon,
          color: _activeColor,
        ),
        title: Text(
          title,
          style: TextStyle(
              color: (_currentIndex != index) ? _defaultColor : _activeColor),
        ));
  }
}
